<template>
  <Drawer
    :visible="visible"
    title="查看详情"
    width="30%"
    @close="closeModal"
    :footer-style="{ textAlign: 'right' }"
    placement="right"
    :destroy-on-close="true"
  >
    <template #closeIcon>
      <arrow-left-outlined />
    </template>

    <Form ref="formRef" :model="formState" :labelCol="{ span: 5 }" :wrapper-col="{ span: 10 }">
      <FormItem label="用户名" name="userName">
        {{ formState.userName }}
      </FormItem>

      <FormItem mesa label="姓名" name="name">
        {{ formState.name }}
      </FormItem>

      <FormItem label="所属企业" name="tenantName">
        {{ formState.tenantName }}
      </FormItem>

      <FormItem mesa label="是否内置" name="isBuiltIn">
        {{ formState.isBuiltIn ? '是' : '否' }}
      </FormItem>

      <FormItem label="手机号码" name="phone">
        {{ formState.phone }}
        <a @click="useDecrytion('phone')" v-if="formState.phone && phoneEyeTag"><EyeOutlined /></a>
      </FormItem>

      <FormItem label="邮箱" name="email">
        {{ formState.email }}
        <a @click="useDecrytion('email')" v-if="formState.email && emailEyeTag"><EyeOutlined /></a>
      </FormItem>

      <FormItem label="创建时间" name="createdTime">
        {{ dayjs(formState.createdTime).format('YYYY-MM-DD HH:mm:ss') }}
      </FormItem>

      <FormItem label="状态" name="status" valuePropName="formState.status">
        {{ formState.status == 1 ? '启用' : '停用' }}
      </FormItem>
    </Form>
  </Drawer>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Drawer, Form, FormItem } from 'ant-design-vue';
import { ArrowLeftOutlined, EyeOutlined } from '@ant-design/icons-vue';
import dayjs from 'dayjs';
import { getDecrytion } from '/@/api/tenant-mgmt/enterpriseManagement/enterpriseManagement';
const visible = ref(false);
const formRef = ref(null);

const formState = ref({
  userName: undefined,
  name: undefined,
  phone: undefined,
  email: undefined,
  tenantName: undefined,
  isBuiltIn: undefined,
  status: undefined,
  password: undefined,
  isUpdatePhone: false,
  isUpdateEmail: false,
  createdTime: undefined,
  id: undefined,
});
const phoneEyeTag = ref(true);
const emailEyeTag = ref(true);
const initEyeTag = () => {
  phoneEyeTag.value = true;
  emailEyeTag.value = true;
};
const closeModal = () => {
  visible.value = false;
  formRef.value.clearValidate();
};
const userId = ref();
const openModal = (record) => {
  initEyeTag();
  visible.value = true;
  userId.value = record.id;
};

const useDecrytion = async (decryptType: string) => {
  if (decryptType == 'phone') {
    phoneEyeTag.value = false;
    formState.value.phone = await getDecrytion({ userId: userId.value, type: decryptType });
  }
  if (decryptType == 'email') {
    emailEyeTag.value = false;
    formState.value.email = await getDecrytion({ userId: userId.value, type: decryptType });
  }
};

const setFormState = (user) => {
  const { email, tenantName, isBuiltIn, password, phone, name, userName, status, id, createdTime } = user;
  formState.value = {
    email,
    tenantName,
    isBuiltIn,
    phone,
    name,
    userName,
    password,
    status,
    id,
    createdTime,
    isUpdatePhone: false,
    isUpdateEmail: false,
  };
};
defineExpose({ closeModal, openModal, setFormState });
</script>
